{% extends "base.html" %}

{% block content %}
<div class="container py-5">
    <!-- Hero Section -->
    <div class="row align-items-center mb-5">
        <div class="col-lg-6">
            <h1 class="display-4 fw-bold mb-3">科学管理体重，<br>健康生活每一天</h1>
            <p class="lead text-muted mb-4">体重管理W850系统助您实现健康目标，通过科学的方法追踪体重变化，管理饮食习惯，记录运动数据。</p>
            {% if not current_user.is_authenticated %}
            <div class="d-grid gap-2 d-md-flex">
                <a href="{{ url_for('auth.register') }}" class="btn btn-primary btn-lg px-4 me-md-2">
                    <i class="fas fa-user-plus"></i> 立即注册
                </a>
                <a href="{{ url_for('auth.login') }}" class="btn btn-outline-secondary btn-lg px-4">
                    <i class="fas fa-sign-in-alt"></i> 登录
                </a>
            </div>
            {% endif %}
        </div>
        <div class="col-lg-6">
            <img src="{{ url_for('static', filename='img/hero-image.svg') }}" alt="健康生活" class="img-fluid">
        </div>
    </div>

    <!-- Features Section -->
    <div class="row g-4 py-5">
        <div class="col-md-4">
            <div class="card h-100 text-center p-4">
                <div class="card-body">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-weight fa-3x text-primary"></i>
                    </div>
                    <h3 class="card-title h5 mb-3">体重追踪</h3>
                    <p class="card-text text-muted">记录每日体重变化，通过图表直观展示变化趋势，帮助您更好地了解身体状况。</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 text-center p-4">
                <div class="card-body">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-utensils fa-3x text-success"></i>
                    </div>
                    <h3 class="card-title h5 mb-3">饮食管理</h3>
                    <p class="card-text text-muted">记录每日饮食摄入，分析营养构成，为您提供个性化的饮食建议。</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 text-center p-4">
                <div class="card-body">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-running fa-3x text-info"></i>
                    </div>
                    <h3 class="card-title h5 mb-3">运动记录</h3>
                    <p class="card-text text-muted">追踪运动数据，制定科学的运动计划，让运动更有效果。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Call to Action Section -->
    <div class="row py-5">
        <div class="col-lg-8 mx-auto text-center">
            <h2 class="fw-bold mb-3">开始您的健康之旅</h2>
            <p class="lead text-muted mb-4">加入体重管理W850系统，与数千用户一起实现健康目标。</p>
            {% if not current_user.is_authenticated %}
            <a href="{{ url_for('auth.register') }}" class="btn btn-primary btn-lg px-5">
                <i class="fas fa-rocket"></i> 立即开始
            </a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %} 